import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Eye, Settings, Upload } from "lucide-react";
import Link from "next/link";

export default function HomePage() {
    return (
        <div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
            <div className="container mx-auto px-4 py-16">
                <div className="text-center mb-12">
                    <h1 className="text-4xl font-bold tracking-tight mb-4">3D 模型展示平台</h1>
                </div>

                <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                    <Card className="group hover:shadow-lg transition-all duration-300">
                        <CardHeader>
                            <div className="flex items-center space-x-2">
                                <div className="p-2 bg-blue-100 dark:bg-blue-900/20 rounded-lg">
                                    <Upload className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                                </div>
                                <CardTitle>模型管理</CardTitle>
                            </div>
                        </CardHeader>
                        <CardContent>
                            <Link href="/management">
                                <Button className="w-full">
                                    <Settings className="mr-2 h-4 w-4" />
                                    进入管理页面
                                </Button>
                            </Link>
                        </CardContent>
                    </Card>

                    <Card className="group hover:shadow-lg transition-all duration-300">
                        <CardHeader>
                            <div className="flex items-center space-x-2">
                                <div className="p-2 bg-blue-100 dark:bg-blue-900/20 rounded-lg">
                                    <Eye className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                                </div>
                                <CardTitle>模型浏览</CardTitle>
                            </div>
                        </CardHeader>
                        <CardContent>
                            <Link href="/explore">
                                <Button className="w-full">
                                    <Eye className="mr-2 h-4 w-4" />
                                    进入浏览页面
                                </Button>
                            </Link>
                        </CardContent>
                    </Card>

                    <Card className="group hover:shadow-lg transition-all duration-300">
                        <CardHeader>
                            <div className="flex items-center space-x-2">
                                <div className="p-2 bg-green-100 dark:bg-green-900/20 rounded-lg">
                                    <Eye className="h-6 w-6 text-green-600 dark:text-green-400" />
                                </div>
                                <CardTitle>模型展示</CardTitle>
                            </div>
                        </CardHeader>
                        <CardContent>
                            <div className="space-y-2">
                                <p className="text-xs text-muted-foreground">示例链接格式：</p>
                                <code className="block text-xs bg-muted p-2 rounded">/view?model=path/to/model.glb</code>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    );
}
